<template>
	<view class="my">
		<div class="header flex align-center" @click="checkLogin">
			<view class="avtar flex-center">
				<view class="flex-center">
					<image :src="userInfo.logo||'../../static/avatar.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex-col flex align-start">
				<view class="fs-40 color-333333" v-if="userInfo.id">
					{{userInfo.nickname}}
				</view>
				<view class="option fs-24 color-FFAA06 align-center " v-if="userInfo.is_vip == 2">
					<image class="icon" src="../../static/my/vip@2x.png" mode=""></image>
					专享会员
				</view>

				<view class="option fs-24 color-FFAA06 flex-center color-666666"
					v-if="userInfo.id && (userInfo.is_vip != 2)">
					普通会员
				</view>
				<view class="fs-40 color-666666" v-if="!userInfo.id">
					还没登陆呀
				</view>
				<view class="option fs-24 color-FFAA06 flex-center color-666666" v-if="!userInfo.id">
					立即登陆
				</view>
			</view>
		</div>
		<div class="body flex-col gap-30">
			<view @tap="checkLogin()&&Go('/subpages/usehistory/usehistory')">
				<usetopcard :data="topcarddata"></usetopcard>
			</view>

			<view class="bodycell flex-col gap-16">
				<view class="flex align-center">
					<image class="icon" src="../../static/my/my_icon_01@2x.png" mode=""></image>
					<view class="flex-col gap-16 flex-1 align-start">
						<view class="fs-28 color-333333">
							签到获取次数
						</view>
						<view class="fs-24 color-666666">
							每日签到获取免费提问次数
						</view>
					</view>
					<view class="option active fs-24 flex-center" v-if="userInfo.is_sign">
						已签到
					</view>
					<view class="option fs-24 flex-center" v-if="!userInfo.is_sign" @click="checkLogin()&&tosignIn()">
						去签到
					</view>
				</view>
				<view class="flex align-center">
					<image class="icon" src="../../static/my/my_icon_02@2x.png" mode=""></image>
					<view class="flex-col gap-16 flex-1 align-start">
						<view class="fs-28 color-333333">
							分享给好友
						</view>
						<view class="fs-24 color-666666">
							已获得 <text class="color-609AF2"> {{userInfo.num || 0}} </text> 次提问机会
						</view>
					</view>
					<button class="option fs-24 flex-center" data-name="shareBtn" open-type="share">
						去分享
					</button>
				</view>

				<view class="flex align-center" @click="checkLogin()&&Go('/subpages/feedback/feedback')">
					<image class="icon" src="../../static/my/my_icon_03@2x.png" mode=""></image>
					<view class="flex-col gap-16 flex-1 align-start">
						<view class="fs-28 color-333333">
							反馈交流
						</view>
						<view class="fs-24 color-666666">
							你的建议是我们进步的动力
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>

				<button class="flex align-center" open-type="contact">
					<image class="icon" src="../../static/my/concant.png" mode="aspectFit"></image>
					<view class="flex-col gap-16 flex-1 align-start">
						<view class="fs-28 color-333333">
							微信客服
						</view>
						<view class="fs-24 color-666666">
							遇到问题联系客服及时解决
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</button>

				<view class="flex align-center" @click="GoAgreement">
					<image class="icon" src="../../static/my/my_icon_04@2x.png" mode=""></image>
					<view class="flex-col gap-16 flex-1 align-start">
						<view class="fs-28 color-333333">
							隐私协议
						</view>
						<view class="fs-24 color-666666">
							隐私协议与使用条款
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</div>
		<!-- <signinc></signinc> -->
		<view style="position: relative;">
			<by-nike-avtar ref="login" :userInfo.sync="userInfo"></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	import usetopcard from './components/usetopcard.vue'
	import userStore from '../../utils/userStore.js'
	import {
		signIn
	} from '../../API/my.js'
	import {
		getUserInfo
	} from '../../API/getUserInfo'
	import {
		getAgreement
	} from '../../API/getAgreement'
	import signinc from '@/components/signin/signin.vue'
	export default {
		components: {
			usetopcard,
			signinc
		},
		data() {
			return {
				userInfo: userStore.get(),
				topcarddata: [{
					num: parseInt(userStore.get().vip_exp_at) || 0,
					numcolor: '#609AF2',
					title: '剩余次数',
					desc: userStore.get().vip_exp_at || ''
				}, {
					num: parseInt(userStore.get().total_consumption) || 0,
					numcolor: '#F7904C',
					title: '消费次数',
					desc: ''
				}, {
					num: parseInt(userStore.get().total_income) || 0,
					numcolor: '#28C764',
					title: '增加次数',
					desc: ''
				}]
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			async init() {
				this.checkLogin() && await getUserInfo();
				this.userInfo = userStore.get();
				this.topcarddata = [{
					num: parseInt(userStore.get().total_money) || 0,
					numcolor: '#609AF2',
					title: '剩余次数',
					desc: userStore.get().vip_exp_at || ''
				}, {
					num: parseInt(userStore.get().total_consumption) || 0,
					numcolor: '#F7904C',
					title: '消费次数',
					desc: ''
				}, {
					num: parseInt(userStore.get().total_income) || 0,
					numcolor: '#28C764',
					title: '增加次数',
					desc: ''
				}];
			},
			async tosignIn() {
				await signIn();
				await getUserInfo();
				this.init();
			},
			async GoAgreement() {
				await getAgreement();
				this.Go('/subpages/content/content?type=storage')
			}
		}
	}
</script>

<style scoped>
	.my>.header {
		width: 750upx;
		height: 320upx;
		padding-top: 37upx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF);
	}

	.my>.header .option .icon {
		width: 28upx;
		height: 28upx;
	}

	button {
		width: unset;
		height: unset;
		background-color: unset;
		border-color: unset;
		width: 100%;
		line-height: unset;
		padding: unset;
		
	}
	button::after{
		content: unset;
	}
	button .icon{
		padding: 5upx;
		box-sizing: border-box;
	}

	.my>.header .option {
		min-width: 154upx;
		height: 50upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin-top: 12upx;
		padding: 0 18upx;
		box-sizing: border-box;
		display: flex;
		gap: 15upx;
	}

	.my>.header .avtar {
		width: 190upx;
		height: 190upx;
		background: #c9e5fd;
		border-radius: 50%;
		margin-left: 37upx;
	}

	.my>.header .avtar>view {
		width: 146upx;
		height: 146upx;
		background: #d4eafd;
		border-radius: 50%;

	}

	.my>.header .avtar image {
		width: 98upx;
		height: 98upx;
		border-radius: 50%;
	}


	.my>.body {
		margin-top: -30upx;
		min-height: calc(100vh - 292upx);
		border-radius: 30upx;
		background-color: #fafdff;
	}

	.bodycell {
		margin: 0 auto;
		width: 690upx;
		min-height: 400upx;
		background: #FFFFFF;
		box-shadow: 0px 2upx 16upx 0upx rgba(7, 18, 55, 0.14);
		border-radius: 20upx;
		padding: 47upx 18upx 33upx 10upx;
	}

	.bodycell .icon {

		width: 98upx;
		height: 98upx;
	}

	.bodycell .option {
		width: 100upx;
		height: 40upx;
		background: #609AF2;
		color: #ffffff;
		padding: unset;
		border-radius: 20upx;
	}

	.bodycell .option.active {
		background: #9EBEEF;
	}

	/* ---------- */
	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.align-start {
		align-items: flex-start;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.gap-30 {
		gap: 30upx;
	}

	.fs-40 {
		font-size: 40upx;
	}

	.fs-24 {
		font-size: 24upx;
	}

	.fs-28 {
		font-size: 28upx;
	}

	.color-FFAA06 {
		color: #FFAA06;
	}

	.color-333333 {
		color: #333333;
	}

	.color-666666 {
		color: #666666;
	}

	.color-609AF2 {
		color: #609AF2;
	}
</style>